<!--  -->
<template>
  <div class="redact">
    <div class="img">
      <!-- 小程序公告图标 -->
      <div class="icon_img">
        <span class="text">直播封面图：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <!-- 个人中心背景图 -->
      <div class="icon_img">
        <span class="text">直播分享图：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
        >
          <img v-if="imageUrl_one" :src="imageUrl_one" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="adduser">
        <!-- 添加公告内容 -->
        <div class="content">
          <span class="text">直播标题：</span>
          <el-input type="text" autosize placeholder="请输入内容" v-model="textarea1" disabled></el-input>
        </div>
      </div>
      <div class="userlist" v-if="tableData">
        <span class="text">回放列表：</span>
        <table-list :tableData="tableData" :listHeader="listHeader" @operate="operate" :type="type"></table-list>
      </div>
    </div>
  </div>
</template>

<script>
import TableList from "../../../components/List/TableList";
export default {
  data() {
    return {
      // 本地路径图片
      imageUrl: "", //公告图标
      imageUrl_one: "", //个人中心背景图
      datas: {},
      options: [],
      msg: [],
      placeholders: "请输入内容", //select框中的placehould
      // 以下是返回后台的图片网络路径
      img_gg: "", //公告图标
      cover_img_id: "",
      img_myself: "", //个人中心图
      share_img_id: "",
      type: "courselive", //列表标识
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      token: {
        token: this.publick.token()
      },
      textarea1: "", //课程名称
      is_show: "",
      is_top: "",
      tableData: [], //列表数据
      listHeader: [], //列表的渲染部分
      is_free: "",
      money: "",
      class_hour: "",
      add_num: "",
      user_id: "",
      course_cate_id: [],
      video: "",
      sort: "",
      remake: "",
      content: "",
      course_id: "", //课程id
      is_user: false, //是否选择用户列表
      api: "https://api.xujiangyu.com/admin", //上传图片域名
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: true,
        // 初始容器高度
        initialFrameHeight: "500",
        // 初始容器宽度
        initialFrameWidth: "95%",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: "http://35.201.165.105:8000/controller.php",
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: "/UEditor/"
      }
    };
  },
  components: { TableList },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    let header_name = ["创建时间", "过期时间", "文件地址"]; //列表头部
    let list_content = ["create_time", "expire_time", "media_url"]; //列表渲染内容字段
    for (let key in this.tableData[0]) {
      list_content.push(key);
    }
    for (let i = 0; i < header_name.length; i++) {
      let obj = {
        label: header_name[i],
        prop: list_content[i]
      };
      this.listHeader.push(obj);
    }
  },
  methods: {
    //获取列表操作的数据
    operate(e) {
      this.datas = e;
      if (this.datas.type == "amend") {
        var a = document.createElement("a");
        a.setAttribute("href", this.datas.media_url);
        document.body.appendChild(a);
        a.click();
      }
    }
  },
  watch: {
    $route: {
      handler: function() {
        if (this.$route.query.id) {
          this.course_id = this.$route.query.id;
          //获取详情
          this.$api
            .liveroomInfo({
              token: this.publick.token(),
              id: this.course_id
            })
            .then(res => {
              console.log(res);
              let datas = res.data;
              (this.textarea1 = datas.name),
                (this.imageUrl = datas.cover_img),
                (this.imageUrl_one = datas.share_img),
                (this.tableData = datas.live_replay);
            })
            .catch(res => {
              console.log(res);
            });
        }
      },
      immediate: true
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.redact {
  background: #fff;
  width: 80%;
  margin: auto;
  height: 89vh;
  overflow: auto;
}
/* 上传图片样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.icon_img {
  display: flex;
  width: 50%;
  margin: auto;
  margin-top: 1vh;
  justify-content: flex-start;
  align-items: center;
}
.img {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 3vh;
}
.flooter {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10vh;
}
.color {
  width: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.but {
  display: flex;
  width: 30%;
  height: 5vh;
  background: #25d22d;
  color: #fff;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: 10vh;
  outline: none;
}
.title {
  display: flex;
  flex-direction: column;
}
.texeS {
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.adduser {
  width: 100%;
  /* height: 82.1vh; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.content {
  width: 95%;
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text {
  font-size: 16px;
  display: block;
  width: 150px;
}
.userlist {
  width: 98%;
  margin: auto;
  margin-top: 4vh;
}
.userdata {
  width: 98%;
  min-height: 5vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.user_img {
  display: block;
  width: 10%;
}
.user_name {
  display: block;
  font-size: 16px;
  margin-left: 3%;
}
</style>